<!-- 角色管理页面 -->
<template>
    <div>
        <el-row v-permission="'sys:role:create'">
            <el-col :span="24">
                <div class="grid-content">
                    <span>角色名称：</span>
                    <el-input v-model="addForm.name" class="m-2" clearable />
                    <span>描述信息：</span>
                    <el-input v-model="addForm.desc" class="m-2" clearable />
                    <el-button type="primary" :icon="Plus" @click="handleAdd">添加</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="角色名称" />
            <el-table-column prop="desc" label="说明" />
            <el-table-column label="操作">
                <template #default="scope">
                    <div v-if="scope.row.id != 1">
                        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)"
                        v-permission="'sys:role:update'" >
                            修改
                        </el-button>
                        <el-button type="primary" @click="handleMandate(scope.$index, scope.row)"
                        v-permission="'sys:role:permissionlist'" >
                            授权
                        </el-button>
                        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)"
                        v-permission="'sys:role:delete'" >
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-bind="pagination" @page-change="handlePageChange" /><!--分页器-->
        <!-- 权限弹出框 -->
        <el-dialog v-model="dialogTreeVisible" title="权限配置" width="600px">
            <el-tree ref="treeRef" :data="TreeData" show-checkbox node-key="id">
                <template #default="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span class="text">
                        {{ data.api }}
                    </span>
                </template>
            </el-tree>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogTreeVisible = false">取消</el-button>
                    <el-button type="primary" @click="grant">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改弹出框 -->
        <el-dialog v-model="dialogEditVisible" title="修改信息" width="700px">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content">
                        <span>角色名称：</span>
                        <el-input v-model="form.name" class="m-2" clearable />
                        <span>描述信息：</span>
                        <el-input v-model="form.desc" class="m-2" clearable />
                        <el-button type="primary" @click="modify">修改</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus } from '@element-plus/icons-vue';//图标 
import { get, post } from "@/utils/http"; //封装的axios请求方式
import { ElMessage, ElMessageBox } from 'element-plus'//提示信息
import { PaginationClass } from "#/index";//分页数据类型

const pagination = ref(new PaginationClass())//分页数据
const dialogTreeVisible = ref(false)//权限弹框是否显示
const dialogEditVisible = ref(false)//修改弹框是否显示
const tableData = ref([]) //表格数据
const roleId = ref(0)//角色id

let treeRef = ref()//树形菜单的节点

let TreeData = ref(<TypeTree[]>[])//权限数组

let data = ref({ //请求传的数据
    _gp: 'admin.role',
    _mt: 'list',
    page: 1,//当前的页数
    limit: 10//每页显示条数
})

let addForm = ref({//添加绑定的数据
    name: '',//名称
    desc: ''//说明
})

let form = ref(<TypeForm>{// 修改绑定的数据
    name: '',//名称
    desc: ''//说明
})

// 挂载时渲染数据
onMounted(() => {
    init()
})

// 数据渲染
function init() {
    get(data.value).then((res) => {
        console.log(res);
        let { data } = res
        tableData.value = data.items;//表格数据赋值
        pagination.value.total = data.total;//总页数赋值
    })
}

//添加
function handleAdd() {
    if (addForm.value.name != '' && addForm.value.desc != '') {
        post({ _gp: 'admin.role', _mt: 'create', role: JSON.stringify(addForm.value) }).then((res) => {
            console.log(res);
            let { errmsg, errno } = res
            200 == errno ? ElMessage.success('添加成功！') : ElMessage.error(errmsg);
            addForm.value = { name: '', desc: '' }
            init()
        })
    } else {
        ElMessage.error('角色名称、描述信息不能为空')
    }

}

// 授权
function handleMandate(index: number, row: TypeRole) {
    dialogTreeVisible.value = true;//显示授权弹框
    roleId.value = row.id;//角色id赋值
    get({ _gp: 'admin.role', _mt: 'permissionList', roleId: row.id }).then((res) => {
        console.log(res);
        let { data } = res;
        TreeData.value = data.systemPermissions;//权限数组赋值
        treeRef.value.setCheckedKeys(data.assignedPermissions)//设置当前选中的节点
    })
}

//授权弹框确定
function grant() {
    let purview = treeRef.value!.getCheckedKeys(true)//选中的权限
    let setPower = { roleId: roleId.value, permissions: purview }//授权对象
    post({ _gp: 'admin.role', _mt: 'permissionSet', roleSetPermissionDTO: JSON.stringify(setPower) }).then((res) => {
        console.log(res);
        let { errmsg, errno } = res;
        200 == errno ? ElMessage.success('授权成功！') : ElMessage.error(errmsg);
        dialogTreeVisible.value = false;//隐藏授权弹框
    })
}

// 修改
function handleEdit(index: number, row: TypeRole) {
    console.log(index, row)
    dialogEditVisible.value = true
    form.value = { ...row }
}

//修改弹框确定
function modify() {
    if (form.value.name != '' && form.value.desc != '') {
        post({ _gp: 'admin.role', _mt: 'update', role: JSON.stringify(form.value) }).then((res) => {
            console.log(res);
            let { errmsg, errno } = res
            init()
            200 == errno ? ElMessage.success('修改成功！') : ElMessage.error(errmsg)
            dialogEditVisible.value = false
        })
    } else {
        ElMessage.error('角色名称、描述信息不能为空')
    }
}

// 删除
function handleDelete(index: number, row: TypeRole) {
    console.log(index, row.id)
    ElMessageBox.confirm(
        '确定要删除吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    ).then(() => {
        get({ _gp: 'admin.role', _mt: 'delete', roleId: row.id }).then((res) => {
            console.log(res);
            let { errmsg, errno } = res
            200 == errno ? ElMessage.success('删除已完成') : ElMessage.error(errmsg)
            init()
        })
    }).catch(() => {
        ElMessage.info('删除已取消')
    })
}

// 分页组件里的数据赋值
function handlePageChange(v: any) {
    data.value.page = v.page
    data.value.limit = v.limit
    init()
}
</script>
<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    .m-2 {
        width: 13em;
        margin-right: 10px;
    }
}

.el-tree {
    .text {
        position: absolute;
        right: 0;
    }
}
</style>